<template>
  <div >
    <a-row :gutter="10">
      <a-col :md="8" :lg="6" :xl="6" :xxl="5" class="scroll" >
        <a-list bordered :data-source="UserList" :loading="leftLoading" style="background: #FFFFFF;">
          <div id="title" slot="header" class="g-flex g-y-center g-x-between" style="font-weight: bold;color: #333333;">
            待手术人员列表
            <a-button size="small" type="primary" icon="reload"  @click="getList">刷新</a-button>
          </div>
          <a-list-item
            itemLayout="vertical"
            :draggable="true"
            slot="renderItem"
            slot-scope="item"
            style="padding: 10px 10px;cursor: move;"
            @dragend="dragend($event,item)"
            @dragenter="dragenter($event)"
          >
            <div class="g-flex-col" style="width: 100%;">
              <div class="g-flex g-x-between g-y-center" >
                <a-avatar  :size="40" :src="require('@/assets/man.png')" />
                <div class="g-flex-col">
                  <a style="cursor: move;">姓名：{{item.name}}</a>
                  <span>卡号：{{item.cardNo}}</span>
                </div>
                <a-tag  color="#108ee9">待手术</a-tag>
              </div>
              <div style="font-weight: bold;margin: 5px 0 2px;color: #333333;">手术信息</div>
              <a-tooltip>
                <template slot="title">
                  <p>项目：{{item.itemName }}</p>
                  <p>主诊医生：{{item.mainDr}}</p>
                </template>
                <div style="font-size: 12px;cursor: default;" class="g-flex">
                  <div style="margin-top: 3px;width:60%;" class="g-no-wrap-hidden">{{item.itemName }}</div>
                  <div style="margin-top: 3px;width:100px;" class="g-no-wrap-hidden" >主诊医生：{{item.mainDr}}</div>
                </div>
              </a-tooltip>
<!--              <div style="font-size: 12px;cursor: default;" class="g-flex-col">-->
<!--                <div style="margin-top: 3px;" class="g-no-wrap-hidden">项目：{{item.itemName }}</div>-->
<!--                <div style="margin-top: 3px;width:100px;" class="g-no-wrap-hidden" >主诊医生：{{item.mainDr}}</div>-->
<!--              </div>-->

            </div>
          </a-list-item>

        </a-list>
      </a-col>
      <a-col :md="16" :lg="18" :xl="18" :xxl="19" class="scroll"  >
        <a-list  :grid="{ gutter:8, sm: 1, md: 2,  xxl: 3 }" :data-source="RoomList" :loading="rightLoading">
          <a-list-item :class="{'enterItem':enterIndex===index}" slot="renderItem" slot-scope="item,index"  @dragenter="dragenter($event,item,index,true)"   >
            <a-card :class="{'enterItemCard':enterIndex===index}" :bodyStyle="{background:item.isUsing=='1'?'#e8e8e8':'none'}">
              <a-card-meta >
                <div slot="title">
                  <a>{{item.roomName}}</a>
                  <a-tag v-if="item.operateState==='0'" style="margin-left: 20px;display: inline;" color="#2db7f5">未开始</a-tag>
                  <a-tag v-else-if="item.operateState==='1'" style="margin-left: 20px;display: inline;" color="#f50"  >手术中</a-tag>
                  <a-tag v-else-if="item.operateState==='2'" style="margin-left: 20px;display: inline;" color="#108ee9">手术完成</a-tag>
<!--                  <a-tag v-else style="margin-left: 20px;" color="#87d068">空闲</a-tag>-->
                </div>
                <div slot="description"   >
                  <a-descriptions :column="2" size="small">
                    <a-descriptions-item label="卡号">{{ item.cardNo }}</a-descriptions-item>
                    <a-descriptions-item label="姓名">{{ item.name }}</a-descriptions-item>
                    <a-descriptions-item label="性别">{{ item.sex }}</a-descriptions-item>
                    <a-descriptions-item label="年龄">{{item.age}}</a-descriptions-item>
                    <a-descriptions-item :span="2" label="项目">{{ item.itemName }}</a-descriptions-item>
                    <a-descriptions-item label="手术医生">{{ item.estimateDr }}</a-descriptions-item>
                    <a-descriptions-item label="巡回护士">{{ item.circuitNurse }}</a-descriptions-item>
                    <a-descriptions-item label="助理医生">{{ item.assistantDr }}</a-descriptions-item>
                    <a-descriptions-item label="器械护士">{{ item.toolNurse }}</a-descriptions-item>
                    <a-descriptions-item label="麻醉师">{{ item.anesthetist }}</a-descriptions-item>
                    <a-descriptions-item label="麻醉方式">{{ item.hocusMode }}</a-descriptions-item>
                    <a-descriptions-item label="开始"  >
                      <a-tooltip placement="bottomLeft">
                        <template slot="title">{{ item.operateStartTime }}</template>
                        <span style="font-size: 12px;color: #000000;">{{ item.operateStartTime }}</span>
                      </a-tooltip>

                    </a-descriptions-item>
                    <a-descriptions-item label="结束">
                      <a-tooltip placement="bottomLeft">
                        <template slot="title">{{ item.operateEndTime }}</template>
                        <span style="font-size: 12px;color: #000000;">{{ item.operateEndTime }}</span>
                      </a-tooltip>
                    </a-descriptions-item>
                  </a-descriptions>
                </div>
                <a-avatar v-if="item.sex==1" slot="avatar" :size="50" :src="require('@/assets/woman.png')" />
                <a-avatar v-else slot="avatar" :size="50" :src="require('@/assets/man.png')" />
              </a-card-meta>
              <!--底部操作栏-->
              <template slot="actions" class="ant-card-actions "  >
                <a-button :disabled="item.operateState!=0" @click="clickStartOperate(item)" icon="play-circle" type="link" class="g-bt-pad-0" >开始手术</a-button>
                <a-button :disabled="item.operateState!=='1'" @click="clickEndOperate(item)"  icon="check" type="link" class="g-bt-pad-0" >结束手术</a-button>
                <a-button :disabled="item.operateState!=='1'" @click="$refs.operateManageDrawer.show(item)" icon="setting" type="link" class="g-bt-pad-0" >手术管理</a-button>
                <a-dropdown :disabled="item.operateState!=='1'">
                  <a-menu slot="overlay" >
                    <a-menu-item key="1" >
                      <a-button  @click="clickChangeRoom(item)"  icon="swap" type="link" class="g-bt-pad-0" >
                        更换手术室
                      </a-button>
                    </a-menu-item>
                    <a-menu-item key="2"  >
                      <a-button  @click="clickCancelOperate(item)" icon="close-circle" type="link" class="g-bt-pad-0" >
                        取消手术
                      </a-button>
                    </a-menu-item>
                  </a-menu>
                  <a-button type="link" class="g-bt-pad-0"> 更多 <a-icon type="down" /> </a-button>
                </a-dropdown>
              </template>
            </a-card>
          </a-list-item>
        </a-list>
      </a-col>
    </a-row>
    <operateManageDrawer ref="operateManageDrawer"/>
    <changeRoomModal ref="changeRoomModal" @success="getList()" />
    <operateRegisterModal ref="operateRegisterModal" @cancelRegister="target_room=''" @success="getList()"/>
  </div>
</template>

<script>
import { SuperTable } from '@/components'
import operateManageDrawer from '@/views/workstation/operation/operateManageDrawer'
import changeRoomModal from '@/views/workstation/operation/changeRoomModal'
import operateRegisterModal from '@/views/workstation/operation/operateRegisterModal'
import { surgicalStaffList , surgicalRoomList, startOperate, finishOperate, cancelOperate} from '@/api/workstation/doctor'
import moment from 'moment'
export default {
  components: {
    SuperTable,
    operateManageDrawer,
    changeRoomModal,
    operateRegisterModal
  },
  data() {
    return {
      currentTime:moment().format('YYYY-MM-DD HH:MM:SS'),
      form: this.$form.createForm(this),
      disabled: true, //是否禁用新增按钮
      // UserList: [{
      //   name:'刘华',
      //   cardNo:'554546564',
      //   info:'879879864564646',
      //   date:'2021-10-26 11:11:11',
      // },{
      //   name:'刘华',
      //   cardNo:'554546564',
      //   info:'879879879878766',
      //   date:'2021-10-26 11:11:11',
      // }],
      UserList: [],
      RoomList: [],
      leftLoading:false,
      rightLoading:false,
      // 查询参数
      queryParam: {
        pageNum: 1,//第几页
        pageSize: 10,//每页中显示数据的条数
        type: 1,
        beginTime: '2021-11-02',
        endTime: '2022-01-10',
      },
      loading: true, //加载状态,
      target_room:'',
      enterIndex:'',
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    /**
     * 获取列表
     * */
    getList(){
      this.leftLoading = true
      this.rightLoading = true
      surgicalStaffList(this.queryParam).then(res => {
        console.log('left',res)
        this.UserList = res.rows
      }).finally(()=>{
        this.leftLoading = false
      })
      surgicalRoomList().then(res => {
        console.log('right',res)
        this.RoomList = res.rows
      }).finally(()=>{
        this.rightLoading = false
      })
    },
    /**
     * 开始手术
     * */
    clickStartOperate(room){
      const _this = this
      this.$confirm({
        title: `确认开始手术吗?`,
        content: h =>
          <div>
            <p style="marginTop:20px;">{ room.roomName }</p>
            <p>客户姓名：{room.name}</p>
            <p>当前时间：{ _this.currentTime }</p>
          </div>,
        onOk() {
          const params = {
            treatId	: room.treatId,
            roomId	: room.roomid,
            operateId: room.operateId,
            startTime : _this.currentTime,
          }
          startOperate(params).then(res=>{
            console.log('开始手术',res)
            if(res.code==200){
              _this.$message.success( res.message)
              _this.getList()
            }else{
              _this.$message.info(res.message)
            }
          })
        },
        onCancel() {
          _this.target_room = ''
        },
      })
    },

    /**
     * 结束手术
     * */
    clickEndOperate(room){
      const _this = this
      this.$confirm({
        title: `确认结束手术吗?`,
        content: h =>
          <div>
            <p style="marginTop:20px;">{ room.roomName }</p>
            <p>客户姓名：{room.name}</p>
            <p>当前时间：{ _this.currentTime }</p>
            <p style="color:red;">完成后将会把手术材料转收费处，请提醒客户结账</p>
          </div>,
        onOk() {
          const params = {
            treatId	: room.treatId,
            roomId	: room.roomid,
            operateId : room.operateId,
            endTime : _this.currentTime,
          }
          finishOperate(params).then(res=>{
            console.log('结束手术',res)
            if(res.code==200){
              _this.$message.success( res.message)
              _this.getList()
            }else{
              _this.$message.info(res.message)
            }
          })
        },
        onCancel() {
          _this.target_room = ''
        },
      })
    },
    /**
     * 取消手术
     * */
    clickCancelOperate(room){
      const _this = this
      this.$confirm({
        title: `确认取消手术吗?`,
        content: h =>
          <div>
            <p style="marginTop:20px;">{ room.roomName }</p>
            <p>客户姓名：{ room.name }</p>
            <p>卡号：{ room.cardNo }</p>
          </div>,
        onOk() {
          const params = {
            treatId	: room.treatId,
            roomId	: room.roomid
          }
          cancelOperate(params).then(res=>{
            console.log('结束手术',res)
            if(res.code==200){
              _this.$message.success( res.message)
              _this.getList()
            }else{
              _this.$message.info(res.message)
            }
          })
        },
        onCancel() {
          _this.target_room = ''
        },
      })
    },
    /**
     * 更换手术室
     * */
    clickChangeRoom(target_room){
      this.$refs.changeRoomModal.show(target_room)
    },
    /**
     * 进入拖拽区域
     * */
    dragenter(event,item='',index = undefined,isRoom=false){
      event.preventDefault()
      if(isRoom){
        this.enterIndex = index
      }else{
        this.enterIndex = ''
      }
      this.target_room = item
    },
    /**
     * 拖拽结束
     * */
    dragend(event,item){
      event.preventDefault()
      const _this = this
      console.log('拖拽结束，手术室',this.target_room)
      console.log('用户信息',item)
      this.enterIndex = ''
      const roomName = _this.target_room.roomName
      const roomid = _this.target_room.roomid
      const roomOperateState = _this.target_room.operateState
      const isUsing = _this.target_room.isUsing
      if(!roomid){
        return
      }
      if(isUsing === '1'|| isUsing === 1 || roomOperateState){
        _this.$error({
          title: `${roomName}正在使用中...`,
          content: '请选择其他手术室',
        })
        _this.target_room = ''
        return
      }
      if(roomid){
        this.$refs.operateRegisterModal.show(item,this.target_room)
      }

    },
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-card-body{
  padding: 16px 12px;
}
/deep/  .ant-descriptions-small .ant-descriptions-row > td{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
/deep/ .ant-list-item-meta-avatar{
  margin-right: 10px;
}
.scroll{
  overflow-y: scroll;
  max-height: 71vh;
}
.scroll::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 8px;  /*高宽分别对应横竖滚动条的尺寸*/
}
.scroll::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 6px;
  background   : #aaa;
}
.scroll::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  border-radius: 8px;
  //background   : #FFFFFF;
}
///deep/ .ant-list-item{
//  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.09);
//}
.enterItem {
  transition:all 0.5s ;
  -moz-transition: all 0.5s ; /* Firefox 4 */
  -webkit-transition: all 0.5s ; /* Safari 和 Chrome */
  -o-transition: all 0.5s ; /* Opera */
  transform:scale(0.9);
}
.enterItemCard {
  box-shadow: 0px 0px 10px 0px #3399ff;
}
</style>